<template>
  <div>
    <el-row>
      <el-col :span="24" class="addRole">
        <el-button type="primary" @click="showDialog('insert')" v-if="state==='0'">新增</el-button>
      </el-col>
    </el-row>
    <!-- 原料库列表 -->
      <el-table :data="tableList" stripe border class="user-table" :height="tableHeight" style="width: 100%;" v-loading="loading">
      <el-table-column fixed type="index" label="序号" sortable min-width="30"></el-table-column>
      <el-table-column prop="cgMaterial.name" label="物料名称" sortable min-width="100"></el-table-column>
      <el-table-column prop="cgSuppilerName.name" label="采购供应商" sortable min-width="100" > </el-table-column>
      <el-table-column prop="performerName" label="物料管理人" sortable width="100"></el-table-column>
      <el-table-column prop="price" label="单价" sortable width="80"></el-table-column>
      <el-table-column prop="remainTotalPrice" label="剩余总额" sortable width="100"></el-table-column>
      <el-table-column prop="isStart" label="任务接收" width="40"  align="center">
        <template slot-scope="scope">
          <span :class="['table-judge',scope.row.isStart===1?'el-icon-circle-check cl-success':'']"></span>
        </template>
      </el-table-column>
      <el-table-column prop="isMaterialUseout" label="物料用完" width="40"  align="center">
        <template slot-scope="scope">
          <span :class="['table-judge',scope.row.isMaterialUseout===1?'el-icon-circle-check cl-success':'']"></span>
        </template>
      </el-table-column>
      <el-table-column prop="planNums" label="计划原料总量" sortable width="80" align="center"></el-table-column>
      <el-table-column prop="actNums" label="实际总量" sortable width="80" align="center"></el-table-column>
      <el-table-column prop="remainNums" label="剩余总量" sortable width="80" align="center"></el-table-column>
      <el-table-column prop="startTime" label="任务接收时间" sortable width="100" :formatter="timeFormatter"></el-table-column>
      <el-table-column prop="arriveMaterialDate" label="物料实际到货时间" sortable width="100" :formatter="timeFormatter"></el-table-column>
      <el-table-column prop="materialUseoutDate" label="物料用完时间" sortable width="100" :formatter="timeFormatter"></el-table-column>
      <el-table-column prop="creatorName" label="创建人" sortable width="100"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" sortable min-width="100" :formatter="timeFormatter"></el-table-column>
      <el-table-column fixed="right" label="操作" align="right" width="100">
        <template slot-scope="scope">
           <el-button @click="showDialog('update',scope.row)" type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
    <!--计划任务详情-->
    <el-dialog class="bodyNopaddingTop" :title="dialog.title" :visible.sync="dialog.isShow"  :close-on-click-modal='false' v-dialogDrag width="1100px">
      <el-tabs v-model="dialog.activeName" @tab-click="handleClick" style="padding-bottom: 15px;">
        <el-tab-pane label="任务信息" name="1" class="dialog1" >
          <h3 class="dialog-plate-title"><span>基本信息</span></h3>       
          <el-form :inline="true" class="demo-form-inline" v-model="dialog.formData" label-position="right" label-width="180px">
            <el-form-item label="物料产品名称">
              <el-autocomplete v-model="dialog.formData.cgMaterial.name"  class="width220" :fetch-suggestions="querySearchAsync" placeholder="请输入内容"  @select="handleSelect"></el-autocomplete>
            </el-form-item>
            <el-form-item label="供应商"  >
              <el-select v-model="dialog.formData.cgSuppiler" class="width220">
                <el-option v-for="item in customers" :key="item.id" :label="item.cgSupplier.name" :value="item.cgSupplier.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="物料管理人">
              <el-input v-model="dialog.formData.performerName" class="width220"></el-input>
            </el-form-item>
             <el-form-item label="单价">
              <el-input v-model="dialog.formData.price" class="width220"></el-input>
            </el-form-item>
             <el-form-item label="剩余总额" v-if="dialog.type='update'">
              <el-input v-model="dialog.formData.remainTotalPrice" class="width220" disabled></el-input>
            </el-form-item>
            <h3 class="dialog-plate-title"><span>待办信息</span></h3>
            <el-form-item label="任务是否接收">
              <el-select v-model="dialog.formData.isStart" class="width220">
                <el-option label="否" :value="0"></el-option>
                <el-option label="是" :value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="接收创建时间">
              <el-date-picker v-model="dialog.formData.startTime" class="width220 noMargin" disabled format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间"></el-date-picker>
            </el-form-item>
            <h3 class="dialog-plate-title"><span>进行中信息</span></h3>
            <el-form-item label="物料是否到货">
              <el-select v-model="dialog.formData.isArriveMaterial" class="width220">
                  <el-option label="否" :value="0"></el-option>
                  <el-option label="是" :value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="物料实际到货时间">
              <el-date-picker v-model="dialog.formData.arriveMaterialDate" class="width220 noMargin"  format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间"></el-date-picker>
            </el-form-item>
            <el-form-item label="到货创建时间">
              <el-date-picker v-model="dialog.formData.arriveMaterialCreateDate" class="width220 noMargin" disabled format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间"></el-date-picker>
            </el-form-item>
            <el-form-item label="计划原料总量">
                <el-input v-model="dialog.formData.planNums" class="width220"></el-input>
            </el-form-item>
            <el-form-item label="实际总量">
                <el-input v-model="dialog.formData.actNums" class="width220"></el-input>
            </el-form-item>
            <el-form-item label="剩余量">
                <el-input v-model="dialog.formData.remainNums" class="width220"></el-input>
            </el-form-item>
            <el-form-item label="物料是否用完">
              <el-select v-model="dialog.formData.isMaterialUseout" class="width220">
                <el-option label="否" :value="0"></el-option>
                <el-option label="是" :value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="物料用完时间">
              <el-date-picker v-model="dialog.formData.materialUseoutDate" class="width220 noMargin" format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间"></el-date-picker>
            </el-form-item>
            <el-form-item label="用完创建时间">
              <el-date-picker v-model="dialog.formData.materialUseoutCreateDate" class="width220 noMargin"  disabled format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间"></el-date-picker>
            </el-form-item>
          </el-form>
          <div style="text-align: center">
            <el-button @click="submitList" type="primary">确 定</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane v-if="state !== '0'"  label="出库信息" name="2">
          <el-button @click="showDialog1('insert')" type="primary" size="small">新增</el-button>
          <el-table :data="processStateData" stripe border class="table-index" style="width: 100%;">
            <el-table-column fixed type="index" label="*" sortable min-width="40"></el-table-column>
            <el-table-column prop="cgMaterialName.name" label="物料名称" sortable min-width="160"></el-table-column>
            <el-table-column prop="nums" label="使用数量" sortable min-width="100"></el-table-column>
            <el-table-column prop="creatorName" label="出库人" sortable min-width="120"></el-table-column>
            <el-table-column prop="outStockDate" label="出库时间" sortable min-width="170"></el-table-column>
            <el-table-column prop="result" label="处理结果"   sortable min-width="130">
              <template slot-scope="scope">
                <div v-if="scope.row.result ===1">正常使用</div>
                <div v-if="scope.row.result ===-1">直接报废</div>
              </template>
            </el-table-column>
            <el-table-column prop="createDate" label="创建时间" sortable min-width="170"></el-table-column>
            <el-table-column fixed="right" label="操作" sortable align="center" width="75">
              <template slot-scope="scope">
                <!-- <el-button @click="showDialog1('update',scope.row)" type="text" size="small">编辑</el-button> -->
                <el-button @click="showDialog1('delete',scope.row)" type="text" size="small"><span class="sub-fn-color3">删除</span></el-button>
              </template>
            </el-table-column>
            </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <el-dialog class="bodyNopaddingTop" :title="dialog1.title" :visible.sync="dialog1.isShow"  :close-on-click-modal='false' v-dialogDrag width="1100px">
      <el-form :inline="true" class="demo-form-inline" v-model="dialog1.formData" label-position="right" label-width="180px">
            <el-form-item label="物料产品名称">
            <el-input v-model="dialog1.formData.cgMaterailName.name" class="width220" disabled></el-input>
            </el-form-item>
            <el-form-item label="数量"  >
               <el-input v-model="dialog1.formData.nums" class="width220"></el-input>
            </el-form-item>
            <el-form-item label="处理结果">
              <el-select v-model="dialog1.formData.result" class="width220">
                <el-option label="正常使用" :value="1"></el-option>
                <el-option label="直接报废" :value="-1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="form-item-block text-center">
              <el-button type="primary" @click="onSubmit">确认</el-button>
            </el-form-item>
          </el-form>
    </el-dialog>
  </div>
</template>
<script>
import resourcesProtectionApi from 'plugins/axios/resourcesProtectionApi.js';/**原料库接口 */
import {mapState} from 'vuex'
export default {
  components: {
  },
  data(){
    return {
      state:'0',
      loading:false,
      tableList:[],
      pagination:{/**分页参数 */
        currentPage:1,
        pageSize:10,
        total:0
      },
      dialog:{
        title:'',
        type:'',
        isShow:false,
        activeName:'1',
        formData:{
          cgMaterial:{}
        }
      },
      dialog1:{
        title:'',
        type:'',
        isShow:false,
        formData:{
          cgMaterailName:{
            name:''
          }
        }
      },
      processStateData:[],/**出库信息列表 */
      customers:[]/**供应商列表 */
    }
  },
  computed:{
    ...mapState({clientHeight:state=>state.common.clientHeight}),
    tableHeight(){
      return this.clientHeight-184;
    }
  },
  created(){},
  mounted(){
    this.state = this.$route.query.state;
    this.getTablList();
  },
  watch: {
    $route(){
      this.state = this.$route.query.state;
      this.getTablList();
    }
  },
  methods:{
    /**时间格式化 */
    timeFormatter(row, column, cellValue, index){
      return cellValue?this.timestampToTime(cellValue,'mm-dd hh:mm'):'';
    },
    /**获取原料库任务列表 */
    getTablList(){
      let self = this;
      self.loading = true;
      let postData={
        currentPage:self.pagination.currentPage,
        pageSize:self.pagination.pageSize,
        state:self.state
      }
      resourcesProtectionApi.rawMaterialsBankList(postData).then(res=>{
        self.loading = false;
        self.tableList= res.content.records;
        self.pagination.total =res.content.total;
      },error=>{
        self.loading = false;
      })
    },
    handleSizeChange(size){/**切换分页条数 */
      this.pagination.pageSize=size;
      this.pagination.currentPage=1;
      this.getTablList();
    },
    handleCurrentChange(current){/**切换分页页数 */
      this.pagination.currentPage=current;
      this.getTablList();
    },
    searchBtn(){
      this.getTablList();
    },
    showDialog(type,row){
      this.dialog.type =type;
      this.dialog.isShow = true;
      this.dialog.activeName = '1';
      switch(type){
        case 'insert':
          this.dialog.title ="新增原料库任务";
          this.dialog.formData={
            cgMaterial:{}
          }
          break;
        case 'update':
          this.dialog.title ="修改原料库任务";
          this.dialog.formData=row;
          this.dialog.formData.cgSuppiler = Number(this.dialog.formData.cgSuppiler);
          this.getCustomersList(row.cgMaterialId);
          break;
      } 
    },
    showDialog1(type,row){
      let self =this;
      self.dialog1.type =type;
      switch(type){
        case 'insert':
          self.dialog1.isShow = true;
          self.dialog1.title = "新增出库记录";
          self.dialog1.formData={
            cgMaterailName:{
              name:self.dialog.formData.cgMaterial.name
            },
            cgMaterial:self.dialog.formData.cgMaterialId,
          }
          break;
         case 'update':
           self.dialog1.isShow = true;
           self.dialog1.title = "查看出库记录";
           self.dialog1.formData= JSON.parse(JSON.stringify(row));
          break;
        case 'delete':
          self.$confirm('是否删除此条出库记录?', '提示', {
          confirmButtonText: '删除',
          cancelButtonText: '取消',
          confirmButtonClass:'bg-warning noBorder',
          type: 'warning'
        }).then(() => {
          resourcesProtectionApi.deleteOutgoingRecord(row.id).then(res=>{
            self.$message.success('删除成功');
            self.outgoingInfo();
            self.getTablList();
          })
          
        }).catch(() => {});
          break;
      }
    },
    submitList(){
      let self = this;
      let postData = JSON.parse(JSON.stringify(self.dialog.formData));
      resourcesProtectionApi.insertUpdateRawMaterialsBank(self.dialog.type,postData).then(res=>{
        self.$message.success(`${self.dialog.title}成功`);
        self.dialog.isShow=false;
        self.getTablList();
      })
    },
    /**获取供应商列表 */
    getCustomersList(id){
      let self =this;
      resourcesProtectionApi.supplierListByMateralId(id).then(res=>{
        self.customers = res.content;
      })
    },
    /**切换tabs */
    handleClick(){
      let self = this;
      switch(self.dialog.activeName){
        case '2':
          self.outgoingInfo();
          break;
      }
    },
    /**出库记录列表 */
    outgoingInfo(){
      let self =this;
     resourcesProtectionApi.outgoingRecordList(self.dialog.formData.id).then(res=>{
       self.processStateData = res.content;
     })
    },
     /**模糊查询物料 */
    querySearchAsync(queryString, cb){
      let self = this;
      resourcesProtectionApi.searchCgMaterial({keyword:queryString}).then(res=>{
        res.content.forEach(item=>{
          item.value = item.name;
        })
        cb(res.content)
      })
    },
    /***选择物料 */
    handleSelect(item){
      let self = this;
      self.dialog.formData.cgMaterialId = item.id;
      self.getCustomersList(item.id);
    },
    onSubmit(){
      let self =this;
      let postData =JSON.parse(JSON.stringify(self.dialog1.formData));
      postData.tid=self.dialog.formData.id;
      delete postData.cgMaterailName;
      resourcesProtectionApi.insertOutgoingRecord(postData).then(res=>{
        self.$message.success('新增出库记录成功');
        self.dialog1.isShow= false;
        self.outgoingInfo();
        self.getTablList();
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
  .addRole
    padding-bottom 10px
</style>
